<template>
  <div>
    <m-infinite
      v-model="loading"
      :isFinished="isFinished"
      @onLoad="getCategoryListData"
    >
      <m-waterfall
        class="px-1 w-full"
        :data="list"
        nodeKey="id"
        :column="isMobileTerminal ? 2 : 5"
        :picturePreReading="false"
      >
        <template v-slot="{ item, width }">
          <item-vue :data="item" :width="width" @click="onToPins" />
        </template>
      </m-waterfall>
    </m-infinite>
    <!-- 响应展示内容 -->
    <transition
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <pins-vue v-if="isVisiblePins" :id="currentPins.id" :rowData="currentPins" />
    </transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getCategoryList } from '@/api/category'
import itemVue from './item.vue'
import { PEXELS_LIST_JSON, LOAD_LIST_JSON_1, LOAD_LIST_JSON_2, LOAD_LIST_JSON_3 } from '@/constants/data'
import { isMobileTerminal } from '@/utils/flexible'
import { useStore } from 'vuex'
import pinsVue from '@/views/pins/components/pins.vue'
import gsap from 'gsap'
import { useEventListener } from '@vueuse/core'

const store = useStore()

// 数据是否在加载中
const loading = ref(false)
// 数据是否全部加载完成
const isFinished = ref(false)
// 数据源
const list = ref([])
// 分页
let query = {
  page: 1
}
// 请求数据
const getCategoryListData = async() => {
  // 数据全部加载完成 return
  if (isFinished.value) return
  // 完场了第一次请求之后，后续的请求让 page 自增
  if (list.value.length) {
    query.page += 1
  }
  const res = await getCategoryList(1, query.page)
  res.data.total = 40
  if (query.page === 1) {
    list.value = PEXELS_LIST_JSON
  } else if (query.page === 2) {
    list.value.push(...LOAD_LIST_JSON_1)
  } else if (query.page === 3) {
    list.value.push(...LOAD_LIST_JSON_2)
  } else if (query.page === 4) {
    list.value.push(...LOAD_LIST_JSON_3)
  }
  // 判断数据是否全部加载完成
  if (list.value.length === res.data.total) {
    isFinished.value = true
  }
  // 修改 loading 标记
  loading.value = false
}

/**
 * 通过此方法修改 query，重新发起请求
 */
const resetQuery = newQuery => {
  query = {...query, ...newQuery}
  console.log(query)
  
  // 重置状态
  isFinished.value = false
  list.value = []
}
/**
 * 监听 currentCategory 的变化
 */
watch(
  () => store.getters.currentCategory,
  (currentCategory) => {
  console.log(currentCategory.id)
  resetQuery({
    page: 1,
    categoryId: 2
  })
})
/**
 * 监听 searchText 的变化
 */
watch(
  () => store.getters.searchText,
  (val) => {
    resetQuery({
      page: 1,
      searchText: val
    })
  }
)

const isVisiblePins = ref(false)
const currentPins = ref({})

/**
 * 进入 pins
 */
const onToPins = (data) => {
  // 修改浏览器的 url
  history.pushState(null, null, `/pins/${data.id}`)
  currentPins.value = data
  localStorage.setItem('currentPins', JSON.stringify(data))
  isVisiblePins.value = true
}

/**
 * 监听浏览器后退按钮事件
 */
 useEventListener(window, 'popstate', () => {
  isVisiblePins.value = false
})

/**
 * 进入动画开始前
 */
const beforeEnter = el => {
  gsap.set(el, {
    scaleX: 0,
    scaleY: 0,
    transformOrigin: '0 0',
    translateX: currentPins.value.localtion?.translateX,
    translateY: currentPins.value.localtion?.translateY,
    opacity: 0
  })
}

/**
 * 进入动画执行中
 */
const enter = (el, done) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 1,
    scaleY: 1,
    opacity: 1,
    translateX: 0,
    translateY: 0,
    onComplete: done
  })
}

/**
 * 离开动画执行中
 */
const leave = (el, done) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 0,
    scaleY: 0,
    x: currentPins.value.localtion?.translateX,
    y: currentPins.value.localtion?.translateY,
    opacity: 0
  })
}
</script>

<style lang="scss" scoped>
</style>
